<!-- components/ChatMessageList.vue -->
<template>
  <div
    class=" w-3/5 mx-auto overflow-y-auto pr-10 pt-10 max-h-[550px]  2xl:max-h-[1050px] flex-1"
    ref="chatContainerRef"
  >
    <Bubble.List :items="items" :roles="roles" />
  </div>
</template>

<script setup lang="ts">
import { Bubble } from 'ant-design-x-vue'
import { ref, nextTick, watch } from 'vue'
import type { BubbleListProps } from 'ant-design-x-vue'

const props = defineProps<{
  items: BubbleListProps['items']
  roles: BubbleListProps['roles']
}>()

const chatContainerRef = ref<HTMLElement | null>(null)

const scrollToBottom = async () => {
  await nextTick()
  if (chatContainerRef.value) {
    setTimeout(() => {
      chatContainerRef.value!.scrollTo({
        top: chatContainerRef.value!.scrollHeight,
        behavior: 'smooth',
      })
    }, 300)
  }
}

// 当消息内容变化时滚动到底部
watch(
  () => props.items,
  () => {
    scrollToBottom()
  },
  { deep: true },
)
</script>



